<template>
  <van-popup v-model:show="visible" v-bind="$attrs" position="bottom" round :style="props.style">
    <div class="h-100 flex-col">
      <slot name="header">
        <div v-if="props.title" class="text-c py-20">
          {{ props.title }}
        </div>
      </slot>
      <slot>
        <div class="flex-1 overflow-y px-15">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh(getCartList, searchForm, false)" class="h-100">
            <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoadList(getCartList, { type: 1 })"
            >
              <van-radio-group v-model="checked">
                <van-cell-group>
                  <van-swipe-cell>
                    <van-cell clickable @click="checked = 'all'" :border="false" class="as px-0">
                      <template #default>
                        <div class="cell-cont flex-row-c">
                          <div class="cell-left flex-row-sa">
                            <van-radio name="all" />
                          </div>

                          <div class="cell-right flex-1 ml-10">
                            <div class="value text-l">全部</div>
                          </div>
                        </div>
                      </template>
                    </van-cell>
                  </van-swipe-cell>

                  <van-swipe-cell v-for="item in list" :key="item.id">
                    <van-cell clickable @click="checked = item.dictValue" class="as px-0">
                      <template #default>
                        <div class="cell-cont flex-row-c">
                          <div class="cell-left flex-row-sa">
                            <van-radio :name="item.dictValue" />
                          </div>

                          <div class="cell-right flex-1 ml-10">
                            <div class="value text-l">{{ item.dictLabel }}</div>
                          </div>
                        </div>
                      </template>
                    </van-cell>
                  </van-swipe-cell>
                </van-cell-group>
              </van-radio-group>
            </van-list>
          </van-pull-refresh>
        </div>
      </slot>
      <slot name="footer">
        <div class="footer-bar flex-row">
          <van-button square block @click="onClose">关闭</van-button>
          <van-button square type="primary" :disabled="!checkedDict" block @click="onConfirm">确定</van-button>
        </div>
      </slot>
    </div>
  </van-popup>
</template>

<script setup>
import { ref, reactive, watch, useAttrs, computed, toRefs } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getDict } from '@/api/common';
import { useRequestList } from '@/mixins/useRequestList';
/**
 * 仓库
 */
import useStore from '@/store/index';
import { storeToRefs } from 'pinia';

const { REQUSET_LIST, onRefresh, onLoadList } = useRequestList(getDict);
const { loading, finished, refreshing, list, page: pagination } = toRefs(REQUSET_LIST);

const checked = ref('');
const checkedDict = computed(() => {
  if (checked.value === 'all') {
    return { dictLabel: '全部', dictValue: '' };
  }
  return list.value.find(o => o.dictValue === checked.value);
});

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  dictCode: {
    type: String,
    default: ''
  },
  style: {
    type: Object,
    default: () => ({})
  }
});

const emit = defineEmits(['update:modelValue', 'onConfirm', 'onLoaded']);

const visible = computed({
  get: () => props.modelValue,
  set: val => {
    emit('update:modelValue', val);
  }
});

watch(
  () => visible.value,
  val => {
    if (!!val) {
      onRefresh(getDict, { code: props.dictCode }, false);
      emit('onLoaded', list.value);
    }
  },
  {
    immediate: true //立即监听--进入就会执行一次 监听显影状态
  }
);

function onConfirm() {
  emit('onConfirm', checkedDict);
  emit('update:modelValue', false);
}

function onClose() {
  checked.value = '';
  emit('onClose');
  emit('update:modelValue', false);
}

defineExpose({});
</script>
<style scoped lang="scss">
.van-popup {
  height: 70%;
  width: 100vw;
}
</style>
